<!DOCTYPE html>
<html style="background: url(css/12.jpg) no-repeat right;">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<style type="text/css">
	div{
		width: 800px;
		height: 600px;
		background: url(css/201611164322636.jpg) no-repeat left;
		margin: 100px auto;
		overflow: hidden;
		text-align: color;
		color: #fff;
	}
	h1{
		margin-top: 50px;
		text-align: center;
		color: #ccc;
	}
	h4{
		text-align: color;
		padding-left: 200px;
	}
	h4 input{
		width: 50px;
		margin: 10px;
		border-radius: 10px;
		border:none;
		text-align: center;
	}
	h4 input:first-child{
		width: 100px;
	}
	button{
		width: 150px;
		height: 150px;
		border-radius: 50%;
		margin-left: 350px;
		border:none;
		background: pink;
		font-size: 50px;
		font-weight: bolder;
		margin-top: 30px;
		cursor: pointer;
		opacity: 0.8;
		color:#999;
	}
	p,h2{
		width: 320px;
		margin:50px auto;
	}
	h2 span{
		color: blue;
	}
	body{
		background-color: red;
		color: #fff;
	}
</style>
<body>
	<div>
		<h1>开始倒计时</h1>
		<h4>
			请输入：<input type="text">年
			<input style="background:'red';" type="text">月
			<input type="text">日
		</h4>
		<button id="btn">开始</button>
		<p>现在时间：<span></span></p>
		<h2>
			<span>000</span>天
			<span>00</span>小时
			<span>00</span>分
			<span>00</span>秒
		</h2>

	</div>
	<script type="text/javascript">
		var inp = document.getElementsByTagName('input'),
			spa = document.getElementsByTagName('span'),
			btn = document.getElementById('btn');
			//获取当前时间，打印到页面
		function ss(){
			var date = new Date();
			var full = date.getFullYear()
			var mon = date.getMonth();
			var dat = date.getDate();
			var hou = date.getHours();
			var min = date.getMinutes();
			var sec = date.getSeconds();
			var sre = full + '年' + num(mon+1) + '月' + num(dat) + '日' + num(hou) + '时' + num(min) + '分' + num(sec) + '秒' ; 
			//console.log(set)
			spa[0].innerHTML = sre;
			spa[0].style.color = 'red';
		}
		//小于10，在前面添加0;
			function num(){
				if(arguments[0] < 10){
					arguments[0] = '0' + arguments[0]
				}else{
					arguments[0] = '' + arguments[0];
				}
				return arguments[0]
			}
			setInterval(ss,1000)
			ss()
			//设置倒计时，并打印到页面
			 function change(a,b,c){
		 	var setTimeStamp = new Date(a,b,c,0,0,0)*1;
		 	var currentTimeStamp = new Date()*1;
		 	// console.log(date);
		 	var dv = setTimeStamp - currentTimeStamp;
		 	var days = Math.floor(dv/(24*60*60*1000));
		 	var hours = Math.floor(dv%(24*60*60*1000)/(60*60*1000));
		 	var mintues = Math.floor(dv%(60*60*1000)/(60*1000));
		 	var seconds = Math.floor(dv%(60*1000)/1000);
		 	spa[1].innerHTML = days;
		 	spa[2].innerHTML = hours;
		 	spa[3].innerHTML = mintues;
		 	spa[4].innerHTML = seconds;
		 	
		 }
			//给一个点击事件，并赋值到文本框
		 	btn.onclick =function(){
		 	debugger
		 	 var aa = inp[0].value;
		 	 var bb = inp[1].value;
		 	 var cc = inp[2].value;
		 		 setInterval(function(){
			var dd = Number(bb)-1;

			console.log(change(aa,dd,cc))
			},1000)
		 }
	</script>
</body>
</html>